<template>
  <div class="authority">
    <!-- <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true">
        <el-form-item label="名称">
          <el-input v-model="searchInfo.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">
            查询
          </el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="gva-table-box unit">
      <div class="gva-btn-list">
        <el-button type="primary" icon="plus" @click="addUnit">新增</el-button>
      </div>
      <el-table :data="tableData" row-key="id">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column align="left" label="名称" prop="title" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="价格(元)" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.price/100 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="面值(谷子币)" prop="amount" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button type="primary" link icon="edit" @click="editUnit(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" link icon="delete" @click="delUnit(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="gva-pagination">
        <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev, pager, next"
          @current-change="handleCurrentChange" />
      </div> -->
    </div>
    <el-drawer v-model="dialogFormVisible" :size="1000" :before-close="handleClose" :show-close="false">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">{{ dialogTitle }}</span>
          <div>
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="enterDialog">确定</el-button>
          </div>
        </div>
      </template>
      <el-form v-if="dialogFormVisible" ref="yyglForm" label-width="150" :model="form" :rules="rules">
        <el-form-item label="名称" prop="title">
          <el-input v-model="form.title" placeholder="请输入" style="width: 500px;" />
        </el-form-item>
        <el-form-item label="面值" prop="amount">
          <el-input v-model.number="form.amount" placeholder="请输入" style="width: 500px;" /><span
            style="margin-left: 8px;">谷子币</span>
        </el-form-item>
        <el-form-item label="售价" prop="prices">
          <el-input v-model="form.prices" placeholder="请输入" style="width: 500px;" /><span
            style="margin-left: 8px;">元</span>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script setup>
import {
  gearAdd,
  gearEdit,
  gearDelete,
  userGear
} from '@/api/diaochangguanli'

import { reactive, ref, onMounted } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'
import { sortBySort } from '@/utils/format'
import AMapLoader from '@amap/amap-jsapi-loader'; //引入
import { CirclePlus, Remove } from '@element-plus/icons-vue'
import RichEdit from '@/components/richtext/rich-edit.vue'
// 通过该函数，可以获取组件当前所在的表单项formItem
const { formItem } = useFormItem()

defineOptions({
  name: 'Yygl'
})
const appStore = useAppStore()
const form = ref({
  amount: '',
  gift: 0,
  title: '',
  price: '',
  prices: '',
})

const searchInfo = ref({
  name: ''
})
const userStore = useUserStore()

const page = ref(1)
// const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)

let dialogVisible = ref(false)
let dialogImageUrl = ref()

//图片预览
const handlePicturePreview = (file, files) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true
}

let validate1 = (rule, value, callback) => {
  if (fileList1.value.length == 0) {
    callback(new Error('请上传图片'))
  } else {
    callback()
  }
}
const rules = reactive({
  title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  amount: [{ required: true, message: '请输入谷子币', trigger: 'blur' }],
  prices: [{ required: true, message: '请输入金额', trigger: 'blur' }],
})

const yyglForm = ref(null)

const initForm = () => {
  yyglForm.value.resetFields()
  form.value = {
    amount: '',
    gift: 0,
    title: '',
    price: '',
    prices: '',
  }
}

const isEdit = ref(false)
const dialogTitle = ref('新增')
const addUnit = () => {
  dialogTitle.value = '新增'
  isEdit.value = false
  dialogFormVisible.value = true
}
const closeDialog = () => {
  initForm()
  dialogFormVisible.value = false
}

const handleClose = (done) => {
  initForm()
  done()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}
const tableData = ref([])
// 查询
const getTableData = async () => {
  const res = await userGear({
    ...searchInfo.value
  })
  if (res.code == 200) {
    tableData.value = res.result
    //total.value = res.result.length
  }
}
getTableData()
const dcList = ref([])
onMounted(() => {

})

const enterDialog = async () => {
  yyglForm.value.validate(async (valid) => {
    if (valid) {
      console.log(form.value, 'form.value');
      form.value.price = Math.round(form.value.prices*100)
      let res
      if (isEdit.value) {
        res = await gearEdit(form.value)
      } else {
        res = await gearAdd(form.value)
      }
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: isEdit.value ? '编辑成功' : '添加成功!'
        })
        getTableData()
        initForm()
        dialogFormVisible.value = false
      }
    }
  })
}

const delUnit = (row) => {
  ElMessageBox.confirm(
    '确认删除?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    const res = await gearDelete(row.id)
    if (res.code === 200) {
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
      getTableData()
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}

const editUnit = async (row) => {
  isEdit.value = true
  dialogTitle.value = '编辑'
  form.value = JSON.parse(JSON.stringify(row))
  form.value.prices = form.value.price/100
  form.value.gearId = row.id
  dialogFormVisible.value = true
}

const onSubmit = () => {
  page.value = 1
  getTableData()
}

const onReset = () => {
  page.value = 1
  searchInfo.value = {
    name: ''
  }
  getTableData()
}
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>
